<template>
  <div :id="dom_class" :style="{'height':data_height.height,'width':data_height.width}"></div>
</template>

<script>
import {getStyleByEl} from "@/utils/dom/get_dom_style";
import {toRefs, onMounted, reactive, inject} from "vue"
import {status_option_pie} from "@/utils/echarts_option/status_option_pie";

export default {
  name: "work_status_pie",
  props: {
    dom_class: {
      type: String,
      default: ""
    },
  },
  setup(props, context) {
    const echarts = inject("echarts");//引入
    const data_height = reactive({
      height: "",
      width: ""
    })
    const {dom_class} = toRefs(props)
    const get_style_dom = (dom) => {
      const el = document.getElementById(dom);
      const style = getStyleByEl(el)
      const height = style.height;
      const width = style.width;
      return {
        height,
        width
      }
    }

    function handle_data(data) {
      let data_list = []
      // const {colseNum, exNum, workNum, waitNum} = data;
      const des_data = {
        colseNum: "关机",
        exNum: "异常",
        workNum: "正常",
        waitNum: "待机"
      }
      for (const key in data) {
        data_list.push({
          name: `${des_data[key]}:${data[key]}`,
          value: data[key]
        })
      }
      return data_list;
    }

    /**
     * 初始化dom
     * */
    const init = (data) => {
      // const {colseNum, exNum, workNum, waitNum} = data;
      const {height, width} = get_style_dom(dom_class.value)
      data_height.height = height;
      data_height.width = width;

      let myChart = echarts.init(document.getElementById(dom_class.value));
      const data_list = handle_data(data)
      status_option_pie.series[0].data = data_list;
      myChart.setOption(status_option_pie)
      window.addEventListener("resize", function () {
        myChart.resize();
      });

    }

    onMounted(() => {

    })
    return {
      data_height,
      init
    }
  }
}
</script>

<style scoped lang="scss">

</style>
